<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>羊了个羊单页面</title>
  <script src="../static/js/vue.global.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #app{
      position: relative;
    }
    .loft{
      width: 240px;
      height: 200px;
      position: absolute;
    }
    .row{
      height: 40px;
      width: 240px;
      position: absolute;
      left: 0;
      /*border: 1px solid skyblue;*/
    }
    .card{
      width: 40px;
      height: 40px;
      border: 1px solid black;
      border-radius: 4px;
      position: absolute;
      top: 0;
    }
    .row{
      position: absolute;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="loft" v-for="(loft, il) in panel" :key="il" :style="{top: `-${il * 20}px`}">
    <div class="row" v-for="(y, iy) in loft" :style="{top: `${iy * 40}px`}" :key="iy">
      <div class="card" v-for="(x, ix) in y" :style="{left: `${ix * 40}px`, background: getBg(x)}" :key="ix" @click="clickCard(iy, ix, il, x)"></div>
    </div>
  </div>



  <!--<div class="panel" v-for="(loft, il) in panel" :key="il">
    <div class="loft" v-for="(x, ix) in loft" :style="{zIndex: il}" :key="ix">
      <div class="row" :style="{top: `${ix * 40}px`, left: `${ix * 40}px`}">
        <div class="card" v-for="(y, iy) in x" :key="iy" :style="{top: `${ix * 40}px`, left: `${y * 40}px`}"></div>
      </div>
    </div>
  </div>-->
</div>
<script>
  // 羊了个羊
  // 层级：
  // 分多层，一层就是一个棋盘。
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        name: 'clw',
        store: {
          1: 9,
          2: 9,
          3: 9,
          4: 9,
          5: 9
        },
        loft: [
          [0, 1, 2, 3, 4, 5],
          [0, 0, 0, 1, 2, 3],
          [0, 0, 0, 1, 2, 3],
          [0, 0, 0, 1, 2, 3],
          [0, 0, 0, 1, 2, 3],
        ],
        loft2: [
          [1, 1, 2, 3, 4, 5],
          [1, 0, 0, 1, 2, 3],
          [1, 0, 0, 1, 2, 3],
          [0, 0, 0, 1, 2, 3],
          [0, 0, 0, 1, 2, 3],
        ],
      }
    },
    computed: {
      panel() {
        return [this.loft, this.loft2]
      }
    },
    methods: {
      getBg(type) {
        const colors = ['white', 'orange', 'yellow', 'green', 'blue', 'purple'];
        return colors[type]
      },
      clickCard(x, y, z, type) {

      }
    }

  }).mount('#app')
</script>
</body>
</html>
